<template>
  <el-container class="w-full h-[87vh] z-50">
    <el-header class="flex items-center">
      <el-icon size="20">
        <ArrowDownBold @click="showLyric" />
      </el-icon>
      <div class="flex-1 flex justify-end gap-10">
        <!-- 最小化 -->
        <svg
          @click="minWindow"
          t="1729402478392"
          class="icon"
          viewBox="0 0 1024 1024"
          version="1.1"
          xmlns="http://www.w3.org/2000/svg"
          p-id="6936"
          width="20"
          height="20"
        >
          <path
            d="M128 448h768c38.4 0 64 25.6 64 64s-25.6 64-64 64H128c-38.4 0-64-25.6-64-64s25.6-64 64-64z"
            p-id="6937"
          ></path>
        </svg>
        <!-- 最大化 -->
        <svg
          t="1729402998498"
          @click="maxWindow"
          class="icon"
          viewBox="0 0 1024 1024"
          version="1.1"
          xmlns="http://www.w3.org/2000/svg"
          p-id="19886"
          width="20"
          height="20"
        >
          <path
            d="M298.688 298.688V128c0-23.552 19.072-42.688 42.624-42.688H896c23.552 0 42.688 19.136 42.688 42.688v554.688a42.688 42.688 0 0 1-42.688 42.624h-170.688v170.368c0 23.68-19.136 43.008-42.944 43.008H128.32a42.88 42.88 0 0 1-43.008-43.008l0.128-554.048c0-23.68 19.2-42.944 43.008-42.944h170.24z m85.312 0h298.368c23.68 0 42.944 19.136 42.944 42.944V640h128V170.688H384v128zM170.752 384l-0.064 469.312H640V384H170.752z"
            fill="#1F1F1F"
            p-id="19887"
          ></path>
        </svg>
        <!-- 关闭按钮 -->
        <el-icon>
          <CloseBold @click="closeWindow" />
        </el-icon>
      </div>
    </el-header>
    <el-main class="">
      <!-- 左侧唱片机 -->
      <div class="flex-1 grid place-items-center">
        <div class="relative w-[310px] h-[280px] bg-[#131313] rounded-lg grid place-items-center">
          <div
            ref="ImgRotateDivRef"
            class="w-60 h-60 rounded-full ImgRotateDiv grid place-items-center bg-gray-500"
          >
            <div class="w-52 h-52 rounded-full grid place-items-center bg">
              <div class="bg-[#233841] w-32 h-32 rounded-full grid place-items-center">
                <img
                  :src="song.id ? song.al.picUrl : ''"
                  class="w-28 h-28 rounded-full bg-white"
                  alt=""
                />
              </div>
            </div>
          </div>
          <img
            src="@renderer/assets/pointer.png"
            :class="isPlay ? '' : '-rotate-[38deg]'"
            class="absolute -top-[125px] left-32 duration-300"
          />
        </div>
      </div>
      <!-- 右侧歌词 -->
      <div class="flex-1">
        <!-- 歌名/歌手 -->
        <div class="text-2xl">
          <p>{{ song.name }}</p>
          <p class="text-lg line-clamp-1 text-ellipsis text-gray-500">
            <span v-for="item in song.ar">
              {{ item.name }}
              <em v-if="item != song.ar[song.ar.length - 1]" class="mr-2">|</em>
            </span>
          </p>
        </div>
        <!-- 歌词 -->
        <div
          ref="lyricRef"
          class="lyricAnimation h-[calc(87vh-145px)] no-scrollbar overflow-auto mt-5 pb-[calc(87vh-145px-96px)]"
        >
          <p
            v-for="(item, index) in lyricArr"
            :class="
              playTime > timeToSeconds(timeArr[index]) &&
              playTime < timeToSeconds(timeArr[index + 1])
                ? 'text-green-600'
                : ''
            "
            class="text-xl leading-[3rem] duration-300"
          >
            {{ item }}
          </p>
        </div>
      </div>
    </el-main>
  </el-container>
</template>

<script setup lang="ts">
import { getCurrentInstance, onMounted, ref, useTemplateRef } from 'vue'
import { useStore } from '@renderer/store'
import { storeToRefs } from 'pinia'
import { timeToSeconds } from '@renderer/hooks'

const { songDetailStore } = useStore()
const { lyricArr, song, timeArr } = storeToRefs(songDetailStore)
const context = getCurrentInstance()
const bus = context?.appContext.config.globalProperties.$bus
const emit = defineEmits(['openPage'])
const { ipcRenderer } = require('electron')
const lyricRef = useTemplateRef<HTMLDivElement>('lyricRef')
const isPlay = ref(false)
const ImgRotateDivRef = useTemplateRef<HTMLDivElement>('ImgRotateDivRef')
// 当前播放时间
const playTime = ref(0)

onMounted(() => {
  bus.on('musicStatus', (value: boolean) => {
    isPlay.value = value
    rotateAnimation()
  })
  // 获取当前播放时间
  bus.on('changeSongPlayTime', (time: number) => {
    playTime.value = time
    // 比较当前播放时间，如果在歌词时间范围内，那么就滚动到对应歌词位置
    timeArr.value.forEach((item, index) => {
      if (time >= timeToSeconds(item)) {
        // 找到当前播放时间对应的歌词
        lyricRef.value!.scrollTop = 48 * (index - 1)
      }
    })
  })
})
// 旋转动画
const rotateAnimation = () => {
  ImgRotateDivRef.value!.style.animationPlayState = isPlay.value ? `running` : `paused`
}
// 点击关闭窗口
const closeWindow = () => {
  ipcRenderer.send('window_close')
}
//点击最大化窗口
const maxWindow = () => {
  ipcRenderer.send('window_max')
}
//点击最小化窗口
const minWindow = () => {
  ipcRenderer.send('window_min')
}
const showLyric = () => {
  emit('openPage', false)
}
</script>

<style scoped>
:deep(.el-main) {
  display: flex;
}

.ImgRotateDiv {
  animation: ImgRotate 13s linear infinite;
}

@keyframes ImgRotate {
  to {
    transform: rotate(360deg);
  }
}
</style>
